<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 430px;
			height: 320px;
			background: skyblue;
			overflow: hidden;
		}
		.box div{
			width: 100px;
			height: 100px;
			background: pink;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			text-align: center;
			line-height: 100px;
		}
		.box div:nth-child(4n){
			margin-right: 0;
		}
		.anim{
			margin-top: -110px;
			transition: all 0.5s;
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
	<script type="text/javascript">
		let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

		let box = document.querySelector('.box')

		//将20个小div渲染到页面上
		function dom() {
			for(let i = 0; i < list.length; i++){
				// let div = document.createElement('div')
				// 模板字符串 `` `字符串${变量}`
				box.innerHTML += `<div>${list[i]}</div>`
			}
		}
		dom()

		let time = null
		function fn() {
			time = setInterval(function() {
				// 将数组前4个放到最后
				for (let i = 0; i < 4; i++) {
					list.push(list[i])
				}
				//删除数组前四个
				list.splice(0, 4)
				console.log(list)


				//给前四个加上向上推进的效果
				let item = document.querySelectorAll('.box div')
				for(let i = 0; i < 4; i++){
					item[i].className = 'anim'
				}

				setTimeout(function() {
				 box.innerHTML = ''
				 //重新渲染界面
				 dom()
				},500)	
			},1000)
		}
		fn()
	</script>
</body>
</html>